<template>
  <a-drawer
    :title=" isAdd ? '活动基础信息(上传同金额兑换码)' : '编辑活动' "
    placement="right"
    :closable="true"
    @ok="handleOkFunc"
    :visible="isShow"
    width="700"
    @close="onClose"
    :maskClosable="false">
    <!-- <a-modal :confirmLoading="confirmLoading"> -->
    <a-form-model
      ref="infoFormModel"
      :model="saveObject"
      :rules="rules"
      style="padding-bottom:50px"
      layout="vertical"
    >
      <a-row justify="space-between" type="flex">
        <a-col :span="11">
          <a-form-model-item label="活动名称:" prop="name">
            <a-input v-model="saveObject.name" />
          </a-form-model-item>
        </a-col>
        <a-col :span="11">
          <a-form-model-item label="红包金额：" prop="amount">
            <a-input v-model="saveObject.amount" :disabled="!isAdd" />
          </a-form-model-item>
        </a-col>
		<a-col :span="11">
          <a-form-model-item label="红包数量：" prop="packetCount">
            <a-input v-model="saveObject.packetCount" :disabled="!isAdd" />
          </a-form-model-item>
        </a-col>
        <a-col :span="11">
          <a-form-model-item label="时间范围：" style="width:100%" required>
             <a-range-picker
                @change="onChange"
                :show-time="{ format: 'HH:mm:ss' }"
              	format="YYYY-MM-DD HH:mm:ss"
				:value="formatDate"
              >
                <a-icon slot="suffixIcon" type="sync" />
              </a-range-picker>
          </a-form-model-item>
        </a-col>

        <a-col :span="11">
          <a-form-model-item label="用户限领数量：" prop="userLimit">
            <a-input-number :precision="0" style="width:100%" v-model="saveObject.userLimit" />
          </a-form-model-item>
        </a-col>
		<a-col :span="11" v-if="isAdd">
          <a-form-model-item label="IP限领数量（0为不限制）：" prop="ipLimit">
            <a-input-number :precision="0" style="width:100%" v-model="saveObject.ipLimit" />
          </a-form-model-item>
        </a-col>
        <a-col :span="11">
          <a-form-model-item label="是否开启：" prop="status">
            <a-radio-group v-model="saveObject.status">
              <a-radio :value="1">开启</a-radio>
              <a-radio :value="0">关闭</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="11" v-if="isAdd">
          <a-form-model-item label="开启收货姓名验证：" prop="checkName">
            <a-radio-group v-model="saveObject.checkName">
              <a-radio :value="1">开启</a-radio>
              <a-radio :value="0">关闭</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
		<a-col :span="11" v-if="isAdd">
          <a-form-model-item label="图片审核/自动审核：" prop="manualAudit">
            <a-radio-group v-model="saveObject.manualAudit">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
		<a-col :span="11" v-if="isAdd">
          <a-form-model-item label="安全验证：" prop="praiseSnapshot">
            <a-radio-group v-model="saveObject.praiseSnapshot">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
		<a-col :span="11">
          <a-form-model-item label="ip检测(慎用)：" prop="ipCheck">
            <a-radio-group v-model="saveObject.ipCheck">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
		<a-col :span="24" v-if="isAdd">
		  <a-form-model-item label="导入口令文档">
            <a-input v-model="saveObject.orderFilePath" disabled="disabled" />
            <JeepayUpload
              :action="action"
              :fileUrl="saveObject.orderFilePath"
              @uploadSuccess="uploadSuccess($event,'')"
            >
              <template slot="uploadSlot" slot-scope="{loading}">
                <a-button style="marginTop:10px;"> <a-icon :type="loading ? 'loading' : 'upload'" /> {{ loading ? '正在上传' : '点击上传' }} </a-button>
                <a-button style="marginTop:10px;marginLeft:10px" @click="download"> <a-icon type="download" />下载模版</a-button>
              </template>
            </JeepayUpload>
          </a-form-model-item>
        </a-col>
      </a-row>

      <div class="drawer-btn-center">
        <a-button :style="{ marginRight: '8px' }" @click="onClose" icon="close">取消</a-button>
        <a-button type="primary" @click="handleOkFunc" icon="check" :loading="confirmLoading">提交</a-button>
      </div>

    </a-form-model>
  </a-drawer>
</template>

<script>
	import {
		req,
		API_ACTIVITYINFO_ADD
	} from '@/api/manage'
	import { upload } from '@/api/manage'
	import JeepayUpload from '@/components/JeepayUpload/JeepayUpload'
	export default {
		components: {
			JeepayUpload
		},
		props: {
			callbackFunc: {
				type: Function,
				default: () => ({})
			}
		},

		data () {
			return {
				action: upload.packetUpload, // 上传文件地址
      			uploadFile: '',
				loading: false, // 按钮上的loading
				confirmLoading: false, // 显示确定按钮loading图标
				isAdd: true, // 新增 or 修改页面标识
				isShow: false, // 是否显示弹层/抽屉
				saveObject: {}, // 数据对象
				id: null, // 更新对象ID
				formatDate: [],
				rules: {
					name: [{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}],
					amount: [{
						required: true,
						message: '请输入红包金额',
						trigger: 'blur'
					}],
					userLimit: [{
						required: true,
						message: '请输入用户限领数量',
						trigger: 'blur'
					}],
					ipLimit: [{
						required: true,
						message: '请输入IP限领数量',
						trigger: 'blur'
					}],
				}
			}
		},
		created () {},
		methods: {
			show (id,item) { // 弹层打开事件
				if (this.$refs.infoFormModel !== undefined) {
					this.$refs.infoFormModel.resetFields()
				}

				this.isAdd = !id
				// 数据恢复为默认数据
				this.saveObject = {
					userLimit: 10,
					ipLimit: 0,
					status: 1,
					checkName: 0,
					manualAudit: 0,
					praiseSnapshot: 1,
					ipCheck: 0
				}
				this.rules.loginUsername = []
				this.confirmLoading = false // 关闭loading

				if (this.isAdd) {
					this.rules.loginUsername.push({
						required: true,
						pattern: /^[a-zA-Z][a-zA-Z0-9]{5,17}$/,
						message: '请输入字母开头，长度为6-18位的登录名',
						trigger: 'blur'
					})
				}

				const that = this
				if (!this.isAdd) { // 修改信息 延迟展示弹层
					that.id = id
					that.saveObject = item
					that.formatDate = [item.startTime,item.endTime]
					this.isShow = true
				} else {
					that.isShow = true // 立马展示弹层信息
				}
			},
			handleOkFunc: function () { // 点击【确认】按钮事件
				const that = this
				this.$refs.infoFormModel.validate(valid => {
					if (valid) { // 验证通过
						// 请求接口
						that.loading = true // 打开按钮上的 loading
						that.confirmLoading = true // 显示loading
						if (that.isAdd) {
							req.add(API_ACTIVITYINFO_ADD, that.saveObject).then(res => {
								that.$message.success('新增成功')
								that.isShow = false
								that.loading = false
								that.callbackFunc() // 刷新列表
							}).catch((res) => {
								that.confirmLoading = false
							})
						} else {
							// req.updateById(API_ACTIVITYINFO_ADD, that.id, that.saveObject).then(res => {
							req.add(API_ACTIVITYINFO_ADD, that.saveObject).then(res => {
								that.$message.success('修改成功')
								that.isShow = false
								that.callbackFunc() // 刷新列表
							}).catch(res => {
								that.confirmLoading = false
							})
						}
					}
				})
			},
			// 点击遮罩层关闭抽屉
			onClose () {
				this.isShow = false
				that.callbackFunc() // 刷新列表
			},
			uploadSuccess (value, name) {
				this.saveObject.orderFilePath = value
				this.$forceUpdate()
			},
			download(){
				window.location.href = 'https://mch.online10min.com/red_template.xlsx'
			},
			onChange (date, dateString) {
				this.formatDate = dateString;
				this.saveObject.start_time = dateString[0] // 开始时间
				this.saveObject.end_time = dateString[1] // 结束时间
			},
		}
	}
</script>

<style lang="less" scoped>
/deep/ .ant-calendar-picker{
	width: 100% !important;
}
</style>
